<template>
  <div>
    <div class="bg-white grid-content">
      <div style="overflow: hidden; ">
        <div class="mytitle"><svg-icon icon-class="yjbb" class="myIcon" /> 采 油 井 班 报 表 填 报</div>
        <div class="myButtons">
          <el-button @click="handleClick('', 'add')">新增</el-button>
          <el-button @click="uploadData">批量导入</el-button>
        </div>
      </div>
      <!-- 表格 -->
      <el-table :data="tableData">
        <el-table-column type="index" label="序号">
        </el-table-column>
        <el-table-column align="center" prop="date" label="日期">
        </el-table-column>
        <el-table-column align="center" prop="jyj" label="集油间">
        </el-table-column>
        <el-table-column align="center" prop="jh" label="井号">
        </el-table-column>
        <el-table-column align="center" prop="jb" label="井别">
        </el-table-column>
        <el-table-column align="center" prop="scsj" label="生产时间">
        </el-table-column>
        <el-table-column align="center" prop="yy" label="油压(MPa)">
        </el-table-column>
        <el-table-column align="center" prop="tydata" label="套压(MPa)">
        </el-table-column>

        <el-table-column align="center" label="螺旋泵">
          <el-table-column align="center" prop="lgbgzdydata" label="工作电压(V)">
          </el-table-column>
          <el-table-column align="center" prop="lgbgzdldata" label="工作电流(A)">
          </el-table-column>
        </el-table-column>

        <el-table-column align="center" label="抽油机">
          <el-table-column align="center" prop="cyjsdl" label="上电流(A)">
          </el-table-column>
          <el-table-column align="center" prop="cyjxdl" label="下电流(A)">
          </el-table-column>
        </el-table-column>


        <el-table-column align="center" prop="csyl" label="掺水压力(MPa)">
        </el-table-column>
        <el-table-column align="center" prop="hyyl" label="回油压力(MPa)">
        </el-table-column>
        <el-table-column align="center" prop="cswd" label="掺水温度(℃)">
        </el-table-column>
        <el-table-column align="center" prop="hywd" label="回油温度(℃)">
        </el-table-column>

        <el-table-column align="center" fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row, 'check')" type="text">查看</el-button>
            <el-button @click="handleClick(scope.row, 'edit')" type="text">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[5, 10, 30, 50]" :page-size="currentSize" layout="->, sizes, prev, pager, next, total, jumper" 
        :total="tableTotal">
      </el-pagination>
    </div>

    <!-- 弹出框 -->
    <el-dialog :title="myDialogTitle" :visible.sync="dialogFormVisible">
      
      <el-form :inline="true" :model="yjbbForm" class="demo-form-inline">
        <el-divider content-position="left">基础信息</el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="集油间:" v-if="!ischeck">
              <el-select v-model="yjbbForm.zyq" placeholder="请选择作业区" clearable>
                <el-option v-for="item in zyqOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
              <el-select v-model="yjbbForm.group" placeholder="请选择大队" clearable>
                <el-option v-for="item in groupOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
              <el-select v-model="yjbbForm.jyj" placeholder="请选择集油间" clearable>
                <el-option v-for="item in jyjOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="集油间:" v-else>
              <el-input v-model="yjbbForm.jyj" placeholder="请输入油压" style="width: 280px;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="日期:">
              <el-date-picker v-model="yjbbForm.time" align="right" type="date" placeholder="请选择日期"
                :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        

        <el-divider content-position="left">数据信息</el-divider>

        <el-row>
          <el-col :span="12">
            <el-form-item label="井号:">
              <el-select v-model="yjbbForm.jh" placeholder="请选择井号" clearable>
                <el-option v-for="item in jhOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="井别:">
              <el-select v-model="yjbbForm.jb" placeholder="请选择井别" clearable>
                <el-option v-for="item in jbOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="生产时间:">
              <el-time-select v-model="yjbbForm.scsj" :picker-options="{
                start: '00:00',
                step: '00:15',
                end: '23:59'
              }" placeholder="请选择生产时间">
              </el-time-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="油压(MPa):">
              <el-input v-model="yjbbForm.yy" placeholder="请输入油压"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="套压(MPa):">
              <el-input v-model="yjbbForm.ty" placeholder="请输入套压"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="螺杆泵工作电压(V):">
              <el-input v-model="yjbbForm.lgbgzdy" placeholder="请输入螺杆泵工作电压"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="螺杆泵工作电流(A):">
              <el-input v-model="yjbbForm.lgbgzdl" placeholder="请输入螺杆泵工作电流"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="抽油机上电流(A):">
              <el-input v-model="yjbbForm.cyjsdl" placeholder="请输入抽油机上电流"></el-input>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row>
          <el-col :span="12">
            <el-form-item label="抽油机下电流(A):">
              <el-input v-model="yjbbForm.cyjxdl" placeholder="请输入抽油机下电流"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="掺水压力(MPa):">
              <el-input v-model="yjbbForm.csyl" placeholder="请输入掺水压力"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="回油压力(MPa):">
              <el-input v-model="yjbbForm.hyyl" placeholder="请输入回油压力"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="掺水温度(℃):">
              <el-input v-model="yjbbForm.cswd" placeholder="请输入掺水温度"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="回油温度(℃):">
              <el-input v-model="yjbbForm.hywd" placeholder="请输入回油温度"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">

            <el-form-item label="备注:">
              <el-input type="textarea" v-model="yjbbForm.remarks"></el-input>
            </el-form-item>
          </el-col>

        </el-row>

      </el-form>

      <div slot="footer" class="dialog-footer" v-show="!ischeck">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // table数据
      tableData: [{
        date: '2022-02-12',
        jh: '树10-40',
        jb: '抽',
        jyj: '第 二 采油作业区 东162队 2 号集油间',
        scsj: '0:00',
        yy: '0.61',
        tydata: '0.24',
        cyjsdl: '22',
        cyjxdl: '21',
        csyl: '1.17',
        hyyl: '0.25',
        cswd: '67.00',
        hywd: '42.00',
        remarks: '',//备注
      }, {
        date: '2022-02-12',
        jh: '树10-41',
        jb: '抽',
        jyj: '第 二 采油作业区 东162队 2 号集油间',
        scsj: '0:00',
        yy: '0.61',
        tydata: '0.24',
        lgbgzdy: '',//螺杆泵工作电压
        lgbgzdl: '',//螺杆泵工作电流
        cyjsdl: '22',
        cyjxdl: '21',
        csyl: '1.17',
        hyyl: '0.25',
        cswd: '67.00',
        hywd: '42.00',
        remarks: '',//备注
      }, {
        date: '2022-02-12',
        jh: '树10-42',
        jb: '抽',
        jyj: '第 二 采油作业区 东162队 2 号集油间',
        scsj: '0:00',
        yy: '0.61',
        tydata: '0.24',
        cyjsdl: '22',
        cyjxdl: '21',
        csyl: '1.17',
        hyyl: '0.25',
        cswd: '67.00',
        hywd: '42.00',
        remarks: '',//备注
      }, {
        date: '2022-02-12',
        jh: '树10-43',
        jb: '抽',
        jyj: '第 二 采油作业区 东162队 2 号集油间',
        scsj: '0:00',
        yy: '0.61',
        tydata: '0.24',
        cyjsdl: '22',
        cyjxdl: '21',
        csyl: '1.17',
        hyyl: '0.25',
        cswd: '67.00',
        hywd: '42.00',
        remarks: '',//备注
      }, {
        date: '2022-02-12',
        jh: '树10-44',
        jb: '抽',
        jyj: '第 二 采油作业区 东162队 2 号集油间',
        scsj: '0:00',
        yy: '0.61',
        tydata: '0.24',
        cyjsdl: '22',
        cyjxdl: '21',
        csyl: '1.17',
        hyyl: '0.25',
        cswd: '67.00',
        hywd: '42.00',
        remarks: '',//备注
      }, {
        date: '2022-02-12',
        jh: '树10-45',
        jb: '抽',
        jyj: '第 二 采油作业区 东162队 2 号集油间',
        scsj: '0:00',
        yy: '0.61',
        tydata: '0.24',
        cyjsdl: '22',
        cyjxdl: '21',
        csyl: '1.17',
        hyyl: '0.25',
        cswd: '67.00',
        hywd: '42.00',
        remarks: '',//备注
      }, {
        date: '2022-02-12',
        jh: '树10-46',
        jb: '抽',
        jyj: '第 二 采油作业区 东162队 2 号集油间',
        scsj: '0:00',
        yy: '0.61',
        tydata: '0.24',
        cyjsdl: '22',
        cyjxdl: '21',
        csyl: '1.17',
        hyyl: '0.25',
        cswd: '67.00',
        hywd: '42.00',
        remarks: '',//备注
      }],
      //table数据总条数
      tableTotal: 30,
      //当前页码
      currentPage: 1,
      // 分页数
      currentSize: 10,
      //表单填报的数据
      yjbbForm: {
        zyq: '',//作业区
        jyj: '',//集油间
        group: '',//大队
        time: new Date(),//填报日期
        jh: '',//井号
        jb: '',//井别
        scsj: '',//生产时间
        yy: '',//油压
        ty: '',//套压(MPa)
        lgbgzdy: '',//螺杆泵工作电压
        lgbgzdl: '',//螺杆泵工作电流
        cyjsdl: '',//抽油机上电流
        cyjxdl: '',//抽油机下电流
        csyl: '',//掺水压力
        hyyl: '',//回油压力
        cswd: '',//掺水温度
        hywd: '',//回油温度
        remarks: '',//备注
      },
      // 集油间下拉框的内容
      zyqOptions: [{ value: '1', label: '第 一 采油作业区' }, { value: '2', label: '第 二 采油作业区' }, { value: '3', label: '第 三 采油作业区' }, { value: '4', label: '第 四 采油作业区' }],
      groupOptions: [{ value: '1', label: '东162队' }, { value: '2', label: '东163队' }, { value: '3', label: '东164队' }, { value: '4', label: '东165队' }],
      jyjOptions: [{ value: '1', label: '1 号集油间' }, { value: '2', label: '2 号集油间' }, { value: '3', label: '3 号集油间' }, { value: '4', label: '4 号集油间' }],
      //时间快捷选择
      pickerOptions: {
        // disabledDate(time) {
        //   return time.getTime() > Date.now();
        // },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      //井号下拉框
      jhOptions: [{ value: '1', label: '树2-30' }, { value: '2', label: '树2-32' }, { value: '3', label: '树3-29' }, { value: '4', label: '树3-31' }],
      //井别下拉框
      jbOptions: [{ value: '1', label: '抽' },],
      //编辑框是否显示
      dialogFormVisible: false,
      //弹出框是否是查看
      ischeck: false,
      //弹出框标题
      myDialogTitle: '',
    }
  },
  methods: {
    onSubmit() {
      console.log('submit!');
    },
    handleClick(row, handle) {
      this.dialogFormVisible = true;

      if (handle == 'check') {
        this.myDialogTitle = '采油井班报表'
        this.ischeck = true
        this.yjbbForm = row
        this.$message({ message: '成功打开', type: 'success' });
      } else if (handle == 'edit') {
        this.myDialogTitle = '采油井班报表编辑'
        this.ischeck = false
        this.$message({ message: '编辑成功', type: 'success' });
      } else if (handle == 'add') {
        this.myDialogTitle = '采油井班报表填报'
        this.ischeck = false
        this.$message({ message: '添加成功', type: 'success' });
      }
      console.log(row);
    },
    uploadData() {
      console.log('批量导入成功')
    },
    // pageSize 改变时会触发
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    // currentPage 改变时会触发
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  }
}
</script>

<style lang="scss" scoped>
// 标题
.mytitle {
  font-size: large;
  padding-left: 10px;
  margin-bottom: 16px;
  float: left;
}

//按钮组
.myButtons {
  float: right
}

//格子的样式
.bg-white {
  background: #ffffff;
}

.grid-content {
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 4px;
}

.calendar ::v-deep .el-button-group::before {
  display: none;
}

.calendar ::v-deep .el-button-group::after {
  display: none;
}

// 分割线样式
.el-divider--horizontal {
  display: block;
  height: 2px;
  width: 100%;
  margin: 24px 0;
}

// 表单各项的样式
.el-form-item {
  margin: 15px 10px 15px 10px;
}
</style>